<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <!-- <nav style="position: fixed; top: 0; width: 100%; height: 60px; background-color: #f0f0f0;">导航栏</nav>
    <div id="section1" style="scroll-margin-top: 60px;">Section 1</div>
    <div style="height: 800px;">Content before Section 1</div>
    <a href="#section1">Go to Section 1</a>

    <div id="section2" style="scroll-margin-top: 60px;">Section 2</div>
    <div style="height: 800px;">Content between sections</div> -->
    <div style="overflow-y: auto; height: 200px; scroll-padding-top: 20px; background-color: pink;">
        <div style="height: 100px;">Item 1</div>
        <div style="height: 100px; background-color: skyblue;">Item 2</div>
        <div style="height: 100px; background-color: chartreuse;">Item 3</div>
        <!-- 滚动到底部时，内容不会紧贴滚动容器的底部 -->
    </div>
</body>

</html>